<template>
	<!-- 大屏-资金预算 -->
	<div class="fundBudget-container">
		<div class="dataScreen" ref="fundScreenRef">
			<ScreenHeader :titleImg="postTitleImg"></ScreenHeader>
			<div class="fundScreen-main">
				<div class="dataScreen-lf">
					<div class="lf-top">
						<ItemTitel
							style="margin: 0"
							:itemTitleImg="postItemTitleImgObj['资金计划执行情况']"
						>
						</ItemTitel>
						<div class="lf-top-cn">
							<div class="itemBox" v-for="(n, i) in leftTopDataArr" :key="i">
								<img
									src="@/assets/screenImg/commonImg/literaryTitleImg.png"
									alt=""
								/>
								<div class="itemCnBox">
									<div class="cnTitle">{{ n.title }}</div>
									<div class="cnInfo">
										<span>{{ changeNumToWan(n.money) }}</span> 万元
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="lf-middle">
						<ItemTitel
							style="margin: 0"
							:itemTitleImg="postItemTitleImgObj['融资额度占用情况']"
						>
						</ItemTitel>
						<!-- chart区域 -->
						<div class="lf-middle-cn">
							<LimitPerChart ref="PerLimitChartRef" />
						</div>
					</div>
					<div class="lf-bottom">
						<ItemTitel
							style="margin: 0"
							:itemTitleImg="postItemTitleImgObj['季度预算一览表']"
						>
						</ItemTitel>
						<div class="lf-bottom-cn">
							<scroll-board
								:config="overviewTableConfig"
								class="overviewScrollBoard"
							/>
						</div>
					</div>
				</div>
				<div class="dataScreen-ct">
					<div class="ct-top">
						<div class="top-item" v-for="(n, i) in ctTopDataArr" :key="i">
							<div class="imgBox"></div>
							<div class="rightBox">
								<div class="right-title">
									{{ n.title }}
								</div>
								<div class="right-info">
									<digital-flop
										:config="n.moneyConfig"
										style="width: 140px; height: 35px"
									/>
									<div class="unit" :style="{ left: n.unitLeftVal + 'px' }">
										万元
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="ct-middle">
						<ItemTitel
							style="margin: 0"
							:itemTitleImg="postItemTitleImgObj['资金状况']"
						>
							<template #rightCnBox>
								<div style="display: flex; margin-right: -58px">
									<SlecetTool
										class="m-r10"
										:optionsArr="pjTypeOptionsArr"
										v-model="selectOption.pjType"
										:getWidth="'119'"
									></SlecetTool>
									<SlecetTool
										class="m-r10"
										:optionsArr="orgTypeOptionsArr"
										v-model="selectOption.orgType"
										:getWidth="'119'"
									></SlecetTool>
									<SlecetTool
										class="m-r10"
										:optionsArr="timeTypeOptionsArr"
										v-model="selectOption.timeType"
										:getWidth="'119'"
									></SlecetTool>
								</div>
							</template>
						</ItemTitel>
						<div class="ct-middle-cn">
							<div class="middle-cn-top">
								<template v-if="selectOption.pjType === '全公司'">
									<!-- chart区域 -->
									<div class="lineChart1Box">
										<div class="chartTitle">流入执行率</div>
										<DashLineChart ref="flowInChartRef" idName="flowInPer" />
									</div>
									<!-- chart区域 -->
									<div class="lineChart2Box">
										<div class="chartTitle">流出执行率</div>
										<DashLineChart ref="flowOutChartRef" idName="flowOutPer" />
									</div>
									<div class="effectBox">
										<div class="effect-cn">
											<span>预算外影响：</span>
											<span>{{ fundStatusObj.effectMoney }}万元</span>
											<!--                    <span>{{ changeNumToWan(fundStatusObj.effectMoney) }}万元</span>-->
										</div>
									</div>
								</template>
								<template v-else>
									<SlecetTool
										:optionsArr="centerSelect.arr"
										v-model="centerSelect.default"
										:getWidth="200"
										@update:modelValue="selectChange"
									></SlecetTool>
								</template>
							</div>
							<!-- chart区域 -->
							<div class="middle-cn-bottom">
								<FlowLineChart
									ref="flowLineChartRef"
									v-if="selectOption.pjType === '全公司'"
								/>
								<scroll-board
									v-else
									:config="flowState.loanTableConfig"
									class="overviewScrollBoard"
								/>
							</div>
						</div>
					</div>
					<div class="ct-bottom">
						<ItemTitel
							style="margin: 0"
							:itemTitleImg="postItemTitleImgObj['财务现金流']"
						>
						</ItemTitel>
						<!-- chart区域 -->
						<div class="ct-bottom-cn">
							<CashFlowChart ref="flowCashChartRef" />
						</div>
					</div>
				</div>
				<div class="dataScreen-rg">
					<div class="rg-top">
						<div class="top-item" v-for="(n, i) in balanceDataArr" :key="i">
							<div class="imgBox">
								<img
									src="@/assets/screenImg/propertyImg/left/pic1.png"
									alt=""
								/>
							</div>
							<div class="item-right">
								<div class="titleBox">{{ n.title }}</div>
								<div class="infoBox">
									<digital-flop
										:config="n.moneyConfig"
										style="width: 140px; height: 35px"
									/>
									<div class="unit" :style="{ left: n.unitLeftVal + 'px' }">
										万元
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="rg-middle">
						<ItemTitel
							style="margin: 0"
							:itemTitleImg="postItemTitleImgObj['还款日']"
						>
						</ItemTitel>
						<div class="rg-middle-cn">
							<scroll-ranking-board
								:config="dueTableConfig"
								style="width: 100%; height: 330px"
								class="dueTableBox"
							/>
						</div>
					</div>
					<div class="rg-bottom">
						<ItemTitel
							style="margin: 0"
							:itemTitleImg="postItemTitleImgObj['贷款情况']"
						>
						</ItemTitel>
						<div class="rg-bottom-cn">
							<div class="titleBox">
								<div class="title-item">
									<span>贷款余额：</span>
									<span>
										{{ changeNumToWan(loanState.loanMoney) }}
										<span class="unit">万元</span></span
									>
								</div>
								<div class="title-item">
									<span>授信余额：</span>
									<span>
										{{ changeNumToWan(loanState.creditMoney) }}
										<span class="unit">万元</span></span
									>
								</div>
							</div>
							<div class="tableBox">
								<scroll-board
									:config="loanState.loanTableConfig"
									class="overviewScrollBoard loan-state"
								/>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="fundBudgetScreen">
import { ref, reactive, onMounted, onBeforeUnmount, watch } from "vue";
import ScreenHeader from "../components/ScreenHeader";
import ItemTitel from "../components/ItemTitel";
import SlecetTool from "../components/SlecetTool";
import {
	ScrollBoard,
	ScrollRankingBoard,
	DigitalFlop,
} from "@kjgl77/datav-vue3";
import { getScale, changeNumToWan } from "../utils/handelScreen";
import LimitPerChart from "./components/PerLimitChart";
import DashLineChart from "../invest/components/DashLineChart";
import CashFlowChart from "./components/CashFlowChart";
import FlowLineChart from "./components/FlowLineChart";

// 引入请求
import {
	getRepayDayList,
	getQuarterBudget,
	getFinancingQuotaRatio,
	getMoneyFlow,
	getBalanceTotal,
	getBalanceBank,
	getQuarterBalance,
	getYearBalance,
	getInfoYearAll,
	getInfoYearDeartment,
	getInfoYearProject,
} from "@/api/dashboard/fundBudget";

// 页面大标题图片
const postTitleImg = require("@/assets/screenImg/fundBudgetImg/资金预算.png");
// 各小标题图片
const postItemTitleImgObj = reactive({
	财务现金流: require("@/assets/screenImg/fundBudgetImg/财务现金流.png"),
	贷款情况: require("@/assets/screenImg/fundBudgetImg/贷款情况.png"),
	还款日: require("@/assets/screenImg/fundBudgetImg/还款日.png"),
	季度预算一览表: require("@/assets/screenImg/fundBudgetImg/季度预算一览表.png"),
	融资额度占用情况: require("@/assets/screenImg/fundBudgetImg/融资额度占用情况.png"),
	资金计划执行情况: require("@/assets/screenImg/fundBudgetImg/资金计划执行情况.png"),
	资金状况: require("@/assets/screenImg/fundBudgetImg/资金状况.png"),
});

// region 融资额度占比
const financingQuotaRatioData = ref([]);
const getFinancingQuotaRatioFun = async () => {
	const { httpStatusCode, data } = await getFinancingQuotaRatio();
	if (httpStatusCode === 200) {
		// 后端返回少了一个数量字段, 因此这里返回了一个number, 等后端返回后再更改字段, 组件里面的配置也需要更改
		financingQuotaRatioData.value = data.records.map((item) => {
			return {
				...item,
				number: 20,
			};
		});
	}
};
// endregion

// region 季度预算一览表
const overviewTableConfig = reactive({
	header: ["部门", "类型", "预算流入", "预算流出"],
	headerHeight: 35,
	oddRowBGC: "transparent",
	evenRowBGC: "transparent",
	headerBGC: "rgba(21,77,160,0.2)",
	data: [],
	columnWidth: [90],
	align: ["center"],
	index: true,
	indexHeader: "序号",
});
const getQuarterBudgetFun = async () => {
	const year = new Date().getFullYear();
	const month = new Date().getMonth() + 1;
	const quarter = Math.floor(month % 3 == 0 ? month / 3 : month / 3 + 1);
	const { httpStatusCode, data } = await getQuarterBudget({
		year,
		quarter,
	});
	if (httpStatusCode === 200) {
		overviewTableConfig.data = data.records.map((item) => {
			let inflow_budget = `<span style="color:#36E3E3;">${changeNumToWan(
				item.inflow_budget
			)}万元</span>`;
			let outflow_budget = `<span style="color:#36E3E3;">${changeNumToWan(
				item.outflow_budget
			)}万元</span>`;
			return [item.department, item.type, inflow_budget, outflow_budget];
		});
	}
};
// endregion

// region 财务现金流
const moneyFlowData = reactive({
	data: [],
	XData: [],
});
const getMoneyFlowFun = async () => {
	let year = new Date().getFullYear();
	const { httpStatusCode, data } = await getMoneyFlow({
		year,
	});
	if (httpStatusCode === 200) {
		data.records.forEach((item) => {
			// 不确定是否需要转换成万元
			// moneyFlowData.data.push(item.balance)
			moneyFlowData.data.push(changeNumToWan(item.balance));
			moneyFlowData.XData.push(item.month);
		});
	}
};
// endregion

// 年度账户余额
const ctTopMoneyBaseConfig = reactive({
	content: "{nt}",
	toFixed: 2,
	textAlign: "left",
	animationFrame: 200,
	style: {
		fontSize: 30,
		fill: "#fff",
		shadowOffsetX: 0,
		shadowOffsetY: 1,
		shadowBlur: 7,
		shadowColor: "#FFDA3A",
	},
});
const ctTopDataArr = ref([
	{
		title: "预算流入执行情况",
		moneyConfig: {
			number: [0],
			...ctTopMoneyBaseConfig,
		},
		unitLeftVal: 64,
	},
	{
		title: "预算流出执行情况",
		moneyConfig: {
			number: [0],
			...ctTopMoneyBaseConfig,
		},
		unitLeftVal: 64,
	},
	{
		title: "年初账户余额",
		moneyConfig: {
			number: [0],
			...ctTopMoneyBaseConfig,
		},
		unitLeftVal: 64,
	},
	{
		title: "当前账户余额",
		moneyConfig: {
			number: [0],
			...ctTopMoneyBaseConfig,
		},
		unitLeftVal: 64,
	},
]);
const getYearBalanceFun = async () => {
	const year = new Date().getFullYear();
	const { httpStatusCode, data } = await getYearBalance({
		year,
	});
	if (httpStatusCode === 200) {
		const resObj = data.records.filter(
			(item) => item.year === new Date().getFullYear() + ""
		)[0];

		let dataKeyNameObj = {
			2: "year_b_balance",
			3: "c_balance",
		};
		ctTopDataArr.value.map((n, i) => {
			if (i > 1) {
				n.moneyConfig.number[0] = resObj[dataKeyNameObj[i]]
					? resObj[dataKeyNameObj[i]] / 10000
					: 0;
				let dataStr = n.moneyConfig.number[0].toFixed(2) + "";
				n.unitLeftVal = dataStr.length * 16;
			}
		});
	}
};
// endregion

// region 资金状况
// 流入/流出执行率, 预算外影响数据
const fundStatusObj = reactive({
	effectMoney: 0,
	flowInPerVal: 0,
	flowOutPerVal: 0,
});

const flowState = reactive({
	loanTableConfig: {
		header: [
			"",
			"项目名称",
			"<span style='color: #D4EDFD'>流入</span>",
			"<span style='color: #D4EDFD'>流出</span>",
		],
		oddRowBGC: "transparent",
		evenRowBGC: "transparent",
		headerHeight: 35,
		headerBGC: "rgba(21,77,160,0.2)",
		data: [],
		columnWidth: [90, 249, 249, 249],
		align: ["center"],
	},
});
const selectOption = reactive({
	pjType: "全公司",
	orgType: "全部",
	timeType: new Date().getFullYear(),
});
// 第一个筛选框 -- 公司/部门/项目
const pjTypeOptionsArr = ref([
	{
		label: "全公司",
		value: "全公司",
	},
	{
		label: "部门",
		value: "部门",
	},
	{
		label: "项目",
		value: "项目",
	},
]);

watch(
	() => selectOption.pjType,
	(newVal) => {
		if (newVal === "全公司") {
			// 调公司接口
			getInfoYearAllFun();
		} else if (newVal === "部门") {
			// 调部门接口
			getInfoYearDeartmentFun();
		} else {
			// 调项目接口
			getInfoYearProjectFun();
		}
	}
);

// 第二个筛选框 -- 项目类型
const orgTypeOptionsArr = ref([
	{
		label: "全部",
		value: "全部",
	},
	{
		label: "经营性项目",
		value: "经营性项目",
	},
	{
		label: "政府性项目",
		value: "政府性项目",
	},
]);
watch(
	() => selectOption.orgType,
	() => {
		if (selectOption.pjType === "全公司") {
			// 调公司接口
			getInfoYearAllFun();
		} else if (selectOption.pjType === "部门") {
			// 调部门接口
			getInfoYearDeartmentFun();
		} else {
			// 调项目接口
			getInfoYearProjectFun();
		}
	}
);

// 第三个筛选框 -- 年份
const timeTypeOptionsArr = ref([]);
const year = new Date().getFullYear();
// 动态生成年份选项 -- 暂时生成两年的选项, 如果要增加改 i < x就行
for (let i = 0; i < 2; i++) {
	timeTypeOptionsArr.value.push({
		label: year - i + "年",
		value: year - i,
	});
}
watch(
	() => selectOption.timeType,
	() => {
		if (selectOption.pjType === "全公司") {
			// 调公司接口
			getInfoYearAllFun();
		} else if (selectOption.pjType === "部门") {
			// 调部门接口
			getInfoYearDeartmentFun();
		} else {
			// 调项目接口
			getInfoYearProjectFun();
		}
	}
);
// 资金计划执行情况
const leftTopDataArr = ref([
	{
		title: "预算流入统计",
		money: 0,
	},
	{
		title: "预算流出统计",
		money: 0,
	},
]);
let infoYearAllFlag = ref(false); // 用于判断是否第一次调用getInfoYearAllFun这个方法

let centerSelect = ref({
	arr: [
		{
			label: "计划内",
			value: "inner",
		},
		{
			label: "计划外",
			value: "out",
		},
	],
	default: "inner",
});

let selectChange = (val) => {
	console.log(val);
};

// 资金预算_详情_年_全公司接口
const getInfoYearAllFun = async () => {
	const { httpStatusCode, data } = await getInfoYearAll({
		year: selectOption.timeType,
		project_type: selectOption.orgType,
	});
	if (httpStatusCode === 200) {
		let res = data.records[0];
		if (!infoYearAllFlag.value) {
			leftTopDataArr.value[0].money = res?.inflow_budget || 0;
			leftTopDataArr.value[1].money = res?.outflow_budget || 0;

			let ctTopKeyObj = {
				0: "inflow",
				1: "outflow",
			};
			ctTopDataArr.value.map((n, i) => {
				if (i < 2) {
					n.moneyConfig.number[0] = res[ctTopKeyObj[i]]
						? res[ctTopKeyObj[i]] / 10000
						: 0;
					let dataStr = n.moneyConfig.number[0].toFixed(2) + "";
					n.unitLeftVal = dataStr.length * 16;
				}
			});
		}

		fundStatusObj.flowInPerVal = res?.inflow_rate || 0;
		fundStatusObj.flowOutPerVal = res?.outflow_rate || 0;
		fundStatusObj.effectMoney = res?.outside_budget_p || 0;
		screenChartObj.chart2 = flowInChartRef.value?.initPlaneDashLineChart(
			fundStatusObj.flowInPerVal * 10 * 10
		);
		screenChartObj.chart3 = flowOutChartRef.value?.initPlaneDashLineChart(
			fundStatusObj.flowOutPerVal * 10 * 10
		);

		// 当选的全公司, 需要请求各部门接口, 数据用于渲染折线图
		const { httpStatusCode: deartmentCode, data: deartmentData } =
			await getInfoYearDeartment({
				year: selectOption.timeType,
				project_type: selectOption.orgType,
			});
		if (deartmentCode === 200) {
			let chartsData = {
				data1: [], // 实际流入
				data2: [], // 实际流出
				data3: [], // 计划流入
				data4: [], // 计划流出
				xData: [], // X轴数据
			};
			deartmentData.records.forEach((item) => {
				// 不确定是否需要转换成万元
				// chartsData.data1.push(item.inflow)
				chartsData.data1.push(changeNumToWan(item.inflow));
				// chartsData.data2.push(item.outflow)
				chartsData.data2.push(changeNumToWan(item.outflow));
				chartsData.data3.push(changeNumToWan(item.inflow_budget));
				chartsData.data4.push(changeNumToWan(item.outflow_budget));
				chartsData.xData.push(item.department);
			});
			screenChartObj.chart5 =
				flowLineChartRef.value?.initCashFlowLineChart(chartsData);
		}

		infoYearAllFlag.value = true;
	}
};
// 资金预算_详情_年_部门接口
const getInfoYearDeartmentFun = async () => {
	const { httpStatusCode, data } = await getInfoYearDeartment({
		year: selectOption.timeType,
		project_type: selectOption.orgType,
	});
	if (httpStatusCode === 200) {
		flowState.loanTableConfig.data = [];
		flowState.loanTableConfig.header[1] =
			"<span style='color: #D4EDFD'>部门名称</span>";
		data.records.forEach((item) => {
			let itemArr = [
				`<div style="display:flex;justify-content:center;align-items:center;width:100%;height:100%;"><img src="${require("@/assets/screenImg/retireImg/icon3.gif")}" alt="" style="width: 30px;height: 30px;"/></div>`,
				`<span style="color: rgba(216,240,255,0.8);">${item.department}</span>`,
				`<span style="font-weight: 500;color: #40C5F1;">${changeNumToWan(
					item.inflow
				)}万元</span>`,
				`<span style="font-weight: 500;color: #40C5F1;">${changeNumToWan(
					item.outflow
				)}万元</span>`,
			];
			flowState.loanTableConfig.data.push(itemArr);
		});
	}
};

// 资金预算_详情_年_项目接口
const getInfoYearProjectFun = async () => {
	const { httpStatusCode, data } = await getInfoYearProject({
		year: selectOption.timeType,
		project_type: selectOption.orgType,
	});
	if (httpStatusCode === 200) {
		flowState.loanTableConfig.data = [];
		flowState.loanTableConfig.header[1] =
			"<span style='color: #D4EDFD'>项目名称</span>";
		data.records.forEach((item) => {
			let itemArr = [
				`<div style="display:flex;justify-content:center;align-items:center;width:100%;height:100%;"><img src="${require("@/assets/screenImg/retireImg/icon3.gif")}" alt="" style="width: 30px;height: 30px;"/></div>`,
				`<span style="color: rgba(216,240,255,0.8);">${item.department}</span>`,
				`<span style="font-weight: 500;color: #40C5F1;">${changeNumToWan(
					item.inflow
				)}万元</span>`,
				`<span style="font-weight: 500;color: #40C5F1;">${changeNumToWan(
					item.outflow
				)}万元</span>`,
			];
			flowState.loanTableConfig.data.push(itemArr);
		});
	}
};
// endregion

// region 季度账户余额
const balanceMoneyBaseConfig = reactive({
	content: "{nt}",
	toFixed: 2,
	textAlign: "left",
	animationFrame: 200,
	style: {
		fontSize: 24,
		fill: "#fff",
		shadowOffsetX: 0,
		shadowOffsetY: 1,
		shadowBlur: 7,
		shadowColor: "#56CAFF",
	},
});
const balanceDataArr = ref([
	{
		title: "当前账户余额",
		type: 1,
		moneyConfig: {
			number: [0],
			...balanceMoneyBaseConfig,
		},
		unitLeftVal: 64,
	},
	{
		title: "季初账户余额",
		type: 2,
		moneyConfig: {
			number: [0],
			...balanceMoneyBaseConfig,
		},
		unitLeftVal: 64,
	},
	{
		title: "季末预测账户余额",
		type: 3,
		moneyConfig: {
			number: [0],
			...balanceMoneyBaseConfig,
		},
		unitLeftVal: 64,
	},
]);
const getQuarterBalanceFun = async () => {
	const year = new Date().getFullYear();
	const month = new Date().getMonth() + 1;
	const quarter = Math.floor(month % 3 == 0 ? month / 3 : month / 3 + 1);
	const { httpStatusCode, data } = await getQuarterBalance({
		year,
		quarter: quarter,
	});
	let balanceKeyObj = {
		1: "c_balance",
		2: "quarter_b_balance",
		3: "quarter_e_balance_forecast",
	};
	if (httpStatusCode === 200) {
		balanceDataArr.value.some((item) => {
			if (!data.records[0]) return true;
			let resObj = data.records[0];
			item.moneyConfig.number[0] = resObj[balanceKeyObj[item.type]]
				? resObj[balanceKeyObj[item.type]] / 10000
				: 0;
			let dataStr = item.moneyConfig.number[0].toFixed(2) + "";
			item.unitLeftVal = dataStr.length * 14.5;
		});
	}
};
// endregion

// region 还款日
const dueTableConfig = reactive({
	data: [],
	textColor: "#D3E3FF",
	color: "#00D5FF",
	fontSize: 12,
	valueFormatter: (value) => {
		return `${value.value}`;
	},
});
const getRepayDayListFun = async () => {
	const { httpStatusCode, data } = await getRepayDayList();
	if (httpStatusCode === 200) {
		dueTableConfig.data = data.records.map((item) => {
			return {
				name: item.bank,
				value: item.due_date,
			};
		});
	}
};
// endregion

// region 贷款情况
const loanState = reactive({
	loanMoney: 0,
	creditMoney: 0,
	loanTableConfig: {
		header: ["银行名称", "贷款余额", "授信金额"],
		oddRowBGC: "transparent",
		evenRowBGC: "transparent",
		headerHeight: 35,
		headerBGC: "rgba(21,77,160,0.2)",
		data: [],
		columnWidth: [90],
		align: ["center"],
		index: true,
		indexHeader: "序号",
	},
});
const getBalanceTotalFun = async () => {
	const { httpStatusCode, data } = await getBalanceTotal();
	if (httpStatusCode === 200) {
		loanState.loanMoney = data.records[0].loans_balance;
		loanState.creditMoney = data.records[0].credit_grant_balance;
	}
};

const getBalanceBankFun = async () => {
	const { httpStatusCode, data } = await getBalanceBank();
	if (httpStatusCode === 200) {
		getLoanTableData(data.records);
	}
};
const getLoanTableData = (data) => {
	data.map((item) => {
		let money2Str = `<span style="color:#FFDA3A ;">￥${changeNumToWan(
			item.credit_grant_balance
		)}万元</span>`;
		let itemArr = [
			item.bank,
			`${changeNumToWan(item.loans_balance)}万元`,
			money2Str,
		];
		loanState.loanTableConfig.data.push(itemArr);
	});
};
// endregion

// 获取子组件的ref
const PerLimitChartRef = ref();
const flowInChartRef = ref();
const flowOutChartRef = ref();
const flowCashChartRef = ref();
const flowLineChartRef = ref();

// 所有图表对象
const screenChartObj = reactive({
	chart1: null,
	chart2: null,
	chart3: null,
	chart4: null,
	chart5: null,
});

// 监听浏览器 resize 事件时执行
const fundScreenRef = ref(null);
const screenResize = () => {
	if (fundScreenRef.value) {
		fundScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
	}
};

const allQuery = async () => {
	await getFinancingQuotaRatioFun(); // 融资额度占比
	await getRepayDayListFun(); // 还款日
	await getQuarterBudgetFun(); // 季度预算一览表
	await getMoneyFlowFun(); // 财务现金流
	await getBalanceTotalFun(); // 贷款授信余额_总数
	await getBalanceBankFun(); // 贷款授信余额_各个银行
	await getQuarterBalanceFun(); // 季度账户余额
	await getYearBalanceFun(); // 年度账户余额
	await getInfoYearAllFun(); // 详情_年_全公司
};

const initAllCharts = () => {
	screenChartObj.chart1 = PerLimitChartRef.value?.initLimitPerChart(
		financingQuotaRatioData.value
	);

	screenChartObj.chart4 =
		flowCashChartRef.value?.initCashFlowChart(moneyFlowData);
};

onMounted(async () => {
	// 初始化自适应
	if (fundScreenRef.value) {
		// 缩放并居中
		fundScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
		// 设计稿宽度
		fundScreenRef.value.style.width = `1920px`;
		// 设计稿高度
		fundScreenRef.value.style.height = `1080px`;
	}

	await allQuery();
	// 初始化 echarts
	await initAllCharts();
	// 为浏览器绑定自适应函数
	window.addEventListener("resize", screenResize);
});
onBeforeUnmount(() => {
	window.removeEventListener("resize", screenResize);
	Object.values(screenChartObj).forEach((val) => val?.dispose());
});
</script>

<style lang="scss" scoped>
@import "./fundBudget.scss";
</style>
<style lang="scss">
// ScrollBoard 默认样式修改
.fundBudget-container {
	.dataScreen {
		.fundScreen-main {
			.dataScreen-lf {
				.lf-bottom {
					.lf-bottom-cn {
						.overviewScrollBoard {
							.header {
								.header-item {
									font-size: 12px;
									color: #d4edfd;
								}
							}

							.rows {
								.row-item {
									font-size: 12px !important;
									color: rgba(216, 240, 255, 0.8) !important;
								}
							}
						}
					}
				}
			}

			.dataScreen-rg {
				.rg-middle {
					.rg-middle-cn {
						.dueTableBox {
							.formatterDateBox {
								width: 59px;
								height: 22px;
								line-height: 22px;
								color: #d8f0ff;
								background: url("@/assets/screenImg/fundBudgetImg/borderBg.png")
									no-repeat;
								background-size: 100% 100%;
							}
						}
					}
				}
			}
		}
	}
}
</style>
